<script setup lang="ts">
import { onMounted } from "vue";
import YHearder from "./components/YHearder.vue";
import YTab from "./components/YTab.vue";
import YTabCol from "./components/YTabCol.vue";
import XTOP from "./components/XTOP.vue";
import Xbottom from "./components/Xbottom.vue";
import { useCapital } from "@/stores/capital";
import { useRoute } from "vue-router";

const capital = useCapital();
// const query: any = useRoute().query;
const route = useRoute();

onMounted(async () => {
    console.log("params ===", route);
    console.log(route.params.id, "query");
    await capital.init(route.params.id + "");
});
</script>
<template>
    <div class="browser">
        <YHearder></YHearder>
        <div class="up-box">
            <XTOP></XTOP>
        </div>
        <div class="bottom-box col">
            <Xbottom></Xbottom>
        </div>
    </div>
</template>
<style lang="scss">
.browser {
    margin-inline: var(--space);
    background: var(--bgs);

    .col {
        margin-top: var(--space);
    }

    .up-box {
        height: calc((100vh - 220px) / 2);
    }

    .bottom-box {
        height: calc((100vh - 220px) / 2);
    }
}

@media screen and (max-width: 1600px){
    .browser {
        margin-inline: var(--space);
        background: var(--bgs);
        .up-box {
            // height: calc(100vh - 220px);
            height: 100%;
        }
        .bottom-box {
            // height: calc(100vh - 220px);
            // height: 100%;
            height: 100%;
        }
    }
}
</style>
   